<template>
  <div class="login" @keydown.enter="handleSubmit">
    <div class="login-con">
      <p slot="title">
        欢迎登录
      </p>
      <div class="form-con">
        <form ref="loginForm" :model="form" :rules="rules">

          <input v-model="form.userName" placeholder="请输入用户名">
          <!--<span><icon :size="16" type="person"></icon></span>-->


          <input type="password" v-model="form.password" placeholder="请输入密码">
          <!--<span><icon :size="14" type="locked"></icon></span>-->

          <button @click="handleSubmit" type="primary" long>登录</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "login",
    data() {
      return {
        form: {
          userName: '',
          password: ''
        },
        rules: {
          userName: [
            {required: true, message: '账号不能为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      handleSubmit() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            // Cookies.set('user', this.form.userName);
            // this.$router.push({
            //   name: 'home_index'
            // });
          }
        });
      }
    }
  }
</script>

<style scoped lang="css">
  .login {
    width: 100%;
    height: 100%;
    background-image: url('../images/login_bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
  }

  .login-con {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);
    width: 300px;
  }

  .login-con-header {
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    padding: 30px 0;
  }

  .login-con .form-con {
    padding: 10px 0 0;
  }

  .login-con .login-tip {
    font-size: 10px;
    text-align: center;
    color: #c3c3c3;
  }
</style>
